layui.use(['table', 'layer'], function () {
    var layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        table = layui.table;


    /**
     * 加载数据表格
     */
    var tableIns = table.render({
        id: "saleChanceTable"   // 用来操作表格的标识
        , elem: '#saleChanceList'  // 绑定容器元素的ID属性值
        , height: 'full-125'  // 容器的高度 full-差值
        , cellMinWidth: 95  // 单元格最小宽度
        , url: ctx + '/sale_chance/list' // 访问数据的URL（后台的数据接口）
        , page: true // 开启分页
        , limit: 10 // 默认每页显示的数量
        , limits: [10, 20, 30, 40, 50]  // 每页页数的可选项
        , toolbar: '#toolbarDemo' // 开启表格头部工具栏，需要绑定需要显示的Id值
        , cols: [[ // 表头
            // 【field: 要求field属性值与返回的数据中对应的属性字段名一致】
            // title：设置列的标题
            // sort: 是否允许排序（默认：false）
            // fixed: 固定列
            {type: 'checkbox', fixed: 'center'}
            , {field: 'customerid', title: 'ID', width: 80, sort: true, fixed: 'left'}
            , {field: 'surname', title: '姓名', align: 'center'}
            , {field: 'age', title: '年龄', align: 'center'}
            , {field: 'gender', title: '性别', align: 'center'}
            , {field: 'creditscore', title: '信用积分', align: 'center'}
            , {field: 'balance', title: '余额', align: 'center'}
            , {field: 'estimatedsalary', title: '薪水', align: 'center'}
            , {field: 'complain', title: '投诉', align: 'center', width: 110}
            , {field: 'pointearned', title: '积分', align: 'center'}
            , {field: 'cluster', title: '类别', align: 'center'}
            , {
                field: 'servicenum', title: '服务类别', align: 'center', templet: function (d) {
                    // 调用函数，返回格式化的结果
                    return formatState(d.servicenum);
                }
            }
            , {
                field: 'servicestate', title: '服务状态', align: 'center', templet: function (d) {
                    // 调用函数，返回格式化的结果
                    return formatDevResult(d.servicestate);
                }
            }
            // , {field: 'isValid', title: '创建人', align: 'center'}
            , {title: '联系客户', templet: '#saleChanceListBar', fixed: 'right', align: 'center', minWidth: 150}
        ]]
    });

    /**
     * 格式化分配状态值
     * 0 = 未分配
     * 1 = 已分配
     * 其他 = 未知
     * @param state
     */
    function formatState(servicenum) {
        if (servicenum == 1) {
            return "<div style='color:#FFB951'>储蓄和投资产品</div>"
        } else if (servicenum == 2) {
            return "<div style='color:green'>健康和保险产品</div>"
        } else if(servicenum==3){
            return "<div style='color:#0B61A4'>个性化金融产品</div>"
        } else{
            return "<div style='color:red'>未知</div>"
        }
    }

    /**
     * 客户服务状态
     * 0 = 未联系
     * 1 = 联系中
     * 2 = 联系成功
     * 3 = 联系失败
     * 4 = 未知
     * @param devResult
     */
    function formatDevResult(servicestate) {
        if (servicestate == 0) {
            return "<div style='color:grey'>未联系</div>"
        } else if (servicestate == 1) {
            return "<div style='color:orange'>联系中</div>"
        } else if (servicestate == 2) {
            return "<div style='color:green'>联系成功</div>"
        } else if (servicestate == 3) {
            return "<div style='color:red'>联系失败</div>"
        } else {
            return "<div style='color:blue'>未知</div>"
        }
    }

    /**
     * 搜索 按钮点击事件，点击搜索，传入参数请求后台返回结果，重载表格
     */
    $(".search_btn").click(function () {
        /**
         * 表格重载：
         * -- 多条件查询
         */
        tableIns.reload({
            // 设置需要传递给后端的参数
            where: { // 设定异步数据接口的额外参数，任意设
                // 通过文本框/下拉框的值，设置传递参数
                customerName: $("[name='customerName']").val() // 客户名
                , createMan: $("[name='createMan']").val() // ID
                , state: $("#state").val() // 服务类别
            }
            , page: {
                curr: 1 // 重新从第 1 页开始
            }
        });
    });

    /**
     * 监听头部工具栏事件
     * 格式：
     * table.on('toolbar(数据表格的lay-filter属性值)', function (data) {
     * })
     */
    table.on('toolbar(saleChances)', function (data) {
        // data-event：对应的元素上设置的lay-event的属性值
        // console.log(data);
        // 判断对应的事件类型
        if (data.event == "add") {
            // 添加操作，打开添加营销机会数据弹出层
            openSaleChanceDialog();
        } else if (data.event == "del") {
            // 删除操作
            deleteSaleChance(data);
        }
    })

    /**
     * 打开 添加/编辑 营销机会数据的窗口
     * 如果营销机会Id为空，则为添加操作
     * 如果营销机会Id不为空，则为修改操作
     */
    function openSaleChanceDialog(saleChanceId) {
        // 弹出层的标题
        var title = "<h3>客户详情管理-客户服务推荐</h3>";
        var url = ctx + "/sale_chance/toSaleChancePage";

        // 判断营销机会Id是否为空
        if (saleChanceId != null && saleChanceId != '') {
            // 更新操作
            title = "<h3>客户详情管理-客户服务推荐</h3>"
            // 请求地址传递营销机会的Id
            url += "?saleChanceId=" + saleChanceId;
        }

        // 打开 iframe 层，即打开一个窗口
        // layer.open({ // 没有加 layui. 最大化时就会是占满整个浏览器窗口
        layui.layer.open({  // 【加了layui. 最大化时，就会在父窗口里面
            // 弹出层的类型
            type: 2,
            // 标题
            title: title,
            // 宽高
            area: ['500px', '620px'],
            // 内容页面的url地址
            content: url,
            // 开启最大化最小化按钮
            maxmin: true
        });
    }

    /**
     *
     * @param data
     */
    function deleteSaleChance(data) {
        // 获取数据表格选中的行数据   // saleChanceTable 即为数据表格的 id 属性值，看layui官方，获取行数据
        var checkStatus = table.checkStatus('saleChanceTable');
        // console.log(checkStatus);

        // 获取所有数据选中的记录对应的数据
        var saleChanceData = checkStatus.data;

        // 判断用户是否选中的记录（选中行的数量大于0）
        if (saleChanceData.length < 1) { // 没有选中时
            layer.msg("请选择要删除的记录！", {icon: 5});
            return;
        }

        // 询问用户是否确认删除
        layer.confirm("您确定要删除选中的记录吗？", {icon: 3, title: "营销机会管理"}, function (index) {
            // 关闭确认框
            layer.close(index);
            // 传递到后台的数据时数组  如：ids=1&ids=2&ids=3
            var ids = "ids=";
            // 循环获取选中行记录的数据
            for (var i = 0; i < saleChanceData.length; i++) {
                if (i < saleChanceData.length - 1) {
                    ids = ids + saleChanceData[i].id + "&ids=";
                } else {
                    ids = ids + saleChanceData[i].id;
                }
            }
            // console.log(ids);

            // 发送ajax请求，执行删除多条营销机会数据
            $.ajax({
                type: "post",
                url: ctx + "/sale_chance/delete",
                data: ids,
                success: function (result) {
                    if (result.code == 200) {
                        // 提示成功
                        layer.msg("删除成功！", {icon: 6});
                        // 【刷新表格】
                        tableIns.reload();
                    } else {
                        // 提示失败
                        layer.msg(result.msg, {icon: 5});
                    }
                }
            });
        });
    }

    /**
     * 行工具栏 编辑 按钮监听
     * <p>
     * 格式：
     * table.on('tool(数据表格的lay-filter属性值)', function (data) {
     * })
     */
    table.on('tool(saleChances)', function (data) {
         //console.log(data+"-----");  // 通过在前端打印看看 data 数据是什么
         //console.log("==="+data.data.customerid)
        // 判断类型
        if (data.event == "edit") { // 编辑操作
            // 得到营销机会Id
            var saleChanceId = data.data.customerid;
            // 打开编辑营销机会数据的窗口
            openSaleChanceDialog(saleChanceId);
        } else if (data.event == "del") { // 删除操作
            // 弹出确认框，询问用户是否确认删除
            layer.confirm('确定要删除该记录吗？', {icon: 3, title: "营销机会管理"}, function (index) {
                // 关闭确认框
                layer.close(index);

                // 发送ajax请求，删除记录
                $.ajax({
                    type: "post",
                    url: ctx + "/sale_chance/delete",
                    data: {
                        ids: data.data.id
                    },
                    success: function (result) {
                        // 判断返回的删除结果
                        if (result.code == 200) {
                            // 提示成功
                            layer.msg("删除成功！", {icon: 6});
                            // 【刷新表格】
                            tableIns.reload();
                        } else {
                            // 提示失败
                            layer.msg(result.msg, {icon: 5});
                        }
                    }
                });
            });
        }
    })

});
